<template>
    <div class="console-page models">
        <el-scrollbar>
            <el-collapse v-model="activeNames">
                <el-collapse-item :title="model.title" :name="model.title" v-for="model in schemas" class="model">
                    <el-table :data="model.properties" border header-cell-class-name="el-table-header-cell"
                        cell-class-name="el-table-cell" class="model-table">
                        <el-table-column prop="name" label="参数名称" min-width="200px" />
                        <el-table-column prop="info.type" label="参数类型" min-width="400px">
                            <template #default="scope">
                                <span>{{ showResponseType(scope.row) }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>


            </el-collapse>
        </el-scrollbar>
    </div>
</template>

<script setup>
import instance from "@/pinia"
import { firstUpperCase } from "@/utils/tools"

const { mainStore } = instance
let schemas = $ref({})
let activeNames = $ref([])

const showResponseType = (row) => {
    return row.info.$ref ? "Refer: " + row.info.$ref.rsplit("/", 1)[1] : firstUpperCase(row.info.type) + (row.info.format ? "(" + row.info.format + ")" : "")
}

onMounted(() => {
    const schemasData = mainStore.getApiInfo.components.schemas
    schemas = Object.keys(schemasData).map(e => { return { title: e, properties: Object.keys(schemasData[e].properties).map(e2 => { return { name: e2, info: { ...schemasData[e].properties[e2] } } }) } })
})
</script>

<style>
.console-page.models .model {
    border-bottom: 1px solid #ebeef5;
}


.console-page.models .title {
    padding: 20px;
}

.console-page.models .el-collapse-item__content {
    padding: 10px;
}

.console-page.models .el-collapse-item__header {
    font-size: 16px;
    padding: 10px;
}

.console-page.models .el-collapse-item__header.is-active {
    border-bottom: 1px solid rgb(172 172 172 / 0.3);
}
</style>
